<template>
    <div class="search">
        <div class="search-default">
           <disperseInput :defaulSelectItems="defaults.slice(0,1)" ref="formDefault"  :colSpan="18" :width="250">
            <el-button size="small" icon="el-icon-search"  @click="submitFilter('formDefault')"></el-button>
            <el-popover
                popper-class="triggerClass"
                placement="bottom"
                width="1100"
                :offset="offset"
                v-model="visible"
                trigger="click">
                <div class="trigger-wrap">
                    <disperseInput ref="formFilter" :defaulSelectItems="defaults" :colSpan="8"></disperseInput>
                    <div class="form-submit">
                        <el-button size="small" type="primary" @click="submitFilter('formFilter')">提交</el-button>
                        <el-button size="small" @click="reset('formFilter')">重置</el-button>
                    </div>
                </div>
                <el-button  slot="reference" size="small" icon="el-icon-collection-tag" class="filtrate-btn" v-if="defaults.length>1"></el-button>
            </el-popover>

           </disperseInput>
        </div>
    </div>
</template>
<script>
import disperseInput from './components/disperseInput.vue'
export default {
    name:'disperseSearchInput',
    props:{
        defaults:{
            type:Array,
            default(){
                return []
            }
        },
        offset:{
            type:Number,
            default(){
                return 350
            }
        }
    },
    data() {
        return {
            visible:false,
        //   defaulSelectItems:[
        //         {
        //             id: '1',
        //             label: "名称",
        //             value: '',
        //             type: 'input',
        //             "field": "name"
        //         },
        //         {
        //             id: '2',
        //             label: '状态',
        //             value: [{ id: 1, name: '状态1', code: '001' }, { id: 2, name: '状态2', code: '002' }, { id: 3, name: '状态3', code: '003' }],
        //             type: 'checkBox',
        //             "field": "status",
        //             multiple: true,
        //         },
        //         {
        //             id: '3',
        //             label: '时间',
        //             value: '',
        //             type: 'dateTime',
        //             "field": "createTime"
        //         },
        //         {
        //             id: '4',
        //             label: '部门',
        //             value: '',
        //             type: 'input',
        //             defalut: true,
        //             "field": "department"
        //         },
        //         {
        //             id: '5',
        //             label: '可用区域',
        //             value: [{ id: 1, name: '区域1', code: '001' }, { id: 2, name: '区域2', code: '002' }, { id: 3, name: '区域3', code: '003' }],
        //             type: 'select',
        //             multiple: true,
        //             "field": "departArea"
        //         }
        //   ]
        lists:[]
        }
    },
    components:{disperseInput},
    created() {

    },
    methods:{
        setDefaulSelectItems(arr){
            this.lists = arr
        },
        reset(rf){
            this.$refs[rf].reset()
            this.$emit('refreshList',{})
        },
        submitFilter(rf){
            let formDefault = this.$refs[rf].getForm()
            let oj = Object.assign({},formDefault)

            let obj = {}
            for(var i in oj){
                let index = this.defaults.findIndex((el)=>{
                    return el.field == i
                })
                if(index != -1){
                    let el = this.defaults[index]
                    if(el.type == 'input'){
                        obj[el.field] = `${oj[i].trim()}`  
                        obj[`${el.field}-op`] = 'ct'
                    }
                    if(el.type == 'checkBox'||el.type == 'select'){
                        if(oj[i]){
                            let ar = oj[i].split("|")
                            let i = this.defaults.findIndex((item)=>{
                                return item.name == ar
                            })
                            
                            obj[el.field] = i!=-1?this.defaults[i].code:ar
                            obj[`${el.field}-op`] = 'il'
                        }
                    }
            
                    if(el.type == 'dateTime'){
                        if(oj[i]){
                            var arr = oj[i].split("-")
                            var time1 = arr.length!=0?arr[0]:''
                            var time2 = arr.length>1?arr[1]:''
                            obj[`${el.field}-0`] = time1
                            obj[`${el.field}-1`] = time2
                            obj[`${el.field}-op`] = 'bt'
                        }
                    }
                }
            }
            this.$emit('refreshList',obj)
            this.visible = false
        },

    },
    mounted() {

    }
}
</script>

<style scoped>
.search-default{
    width: 100%;
}
::v-deep .filter-sys-popper {
    width: 80% !important;
    margin: 20px;
    left: 200px !important;
}

.trigger-wrap{
    padding: 20px;
}
.form-submit{
    padding: 10px 0px;
}
.filtrate-btn{
    margin-left: 10px;
}

</style>